const path = require('path')
// npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 演示懒加载, 在 webpack 配置同代码分割. 看 index.js 里的 button.onclick
module.exports = (env) => {
  return {
    // 生产环境将默认使用 TerserPlugin 来压缩并且混淆代码
    mode: env.production ? 'production' : 'development',
    /**
     * 参考了 webpack 代码分离, 两个模块分割共享的 lodash.
     * 注意还得设置 optimization.runtimeChunk: 'single' 让一个 html 可以有多个 entry
     * 打包后产物
     * asset shared.bundle.js 557 KiB [emitted] (name: shared)
     * asset index.bundle.js 2.6 KiB [emitted] (name: index)
     * asset another.bundle.js 1.66 KiB [emitted] (name: another)
     */
    entry: {
      index: {
        import: './src/index.js',
        dependOn: 'shared'
      },
      shared: 'lodash'
    },

    // mode 为 development 时使用 inline-source-map 会内联插入代码，可以追踪错误代码准确信息和源代码的错误位置. 显著增加 bundle 体积, 降低整体性能, 但是构建速度快
    // mode 为 production 时应该选用 source-map. 外置一个 sourceMap 文件, 同样可以追踪错误代码准确信息和源代码的错误位置
    // 打开这个选项后, development 产出的 bundle.js 从 555kb 提升到 1.38MB
    // 代码里产生的错误有更明显的指引.
    // ...(env.production ? { devtool: 'source-map' } : { devtool: 'inline-source-map' }),

    // 提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能
    // 将 dist 目录下的文件 serve 到 localhost:8080 下
    // npm install --save-dev webpack-dev-server
    devServer: {
      static: './dist'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      // 在每次构建前清理 /dist 文件夹
      clean: true
    },
    plugins: [
      // 用来生成 dist/index.html 的
      // 所有的 output 的 bundle 会自动添加到 html 中。
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],

    // SplitChunksPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk
    // 将 lodash 分离到单独的 chunk，并且将其从主 bundle 中移除，减轻了大小
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}
